<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<script src="./layui/layui.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
	</head>

	<body>
		<div class="layui-form-item" style="margin-top: 20px" onsubmit="false">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-inline">
					<input class="layui-input" name="loginName" id="loginName" lay-verify="required" />
				</div>
				<label class="layui-form-label">是否禁用</label>
				<div class="layui-input-inline">
					<select class="layui-input" id="isLockoutsss" lay-verify="required">
						<option value="">---请选择---</option>
						<option value="1">是</option>
						<option value="0">否</option>
					</select>
				</div>
				<button class="layui-btn" id="serach" data-type="reload">搜索</button>
				<button class="layui-btn" id="chongzhi" data-type="reload"><i class="layui-icon layui-icon-refresh-1"></i></button>
			</div>
		</div>
		<button type="button" lay-submit="" class="layui-btn layui-btn-warm" id="delAll">批量删除</button>
		<table id="demo" lay-filter="test"></table>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="roles">角色</a>
			<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="section">部门</a> -->
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			<a class="layui-btn layui-btn layui-btn-normal layui-btn-xs" lay-event="editpwd">重置密码</a>
		</script>
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
			</div>
		</script>
		<!-- 按钮 -->
		<script type="text/html" id="isLockout">
		{{# if(d.isLockout == 1){ }}
			<input type="checkbox" name="isLockout" lay-skin="switch" value="{{d.id}}" lay-text="是|否"
				lay-filter="zhuangtaiDemo" {{ d.isLockout==1 ? 'checked' : '' }}> {{# }else{ }}
				<input type="checkbox" name="isLockout" lay-skin="switch" value="{{d.id}}" lay-text="是|否"
					lay-filter="zhuangtaiDemo" {{ d.isLockout==1 ? 'checked' : '' }}> {{# } }}
		</script>

		<script>
			layui.use(['table', 'form'], function() {
				var table = layui.table;
				var $ = layui.jquery; //引入jquery
				var form = layui.form;
				var cols = [
					[ //表头
						{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: 'id',
							title: 'ID',

							sort: true,
							fixed: 'left',
							align: 'center'
						}, {
							field: 'loginName',
							title: '用户名',

							align: 'center'
						}
						/*,{field: 'isLockout', title: '是否锁定', width:120,align : 'center'}*/
						, {
							field: 'lastLoginTime',
							title: '最后登录时间',

							align: 'center'
						}, {
							field: 'crateTime',
							title: '账户创建时间',

							align: 'center'
						}, {
							field: 'lockTime',
							title: '被锁定的时间',

							align: 'center'
						}, {
							field: 'protectEmail',
							title: '邮箱',

							align: 'center'
						}, {
							field: 'protectMtel',
							title: '手机号',

							align: 'center'
						}, {
							field: 'state',
							title: '状态',
							style: 'color:green;',
							align: 'center'
						}, {
							field: 'isLockout',
							title: '是否禁用',
							toolbar: '#isLockout',

							align: 'center'
						}, {
							field: 'right',
							title: '操作',
							toolbar: '#barDemo',
							align: 'center',
							width: 350
						}
					]
				]
				intCols();

				function intCols() {
					for (var i = 0; i < cols[0].length; i++) {
						if (cols[0][i].field != undefined) {
							let localfield = 'test' + cols[0][i].field;
							let hidevalue = window.localStorage.getItem(localfield);
							if (hidevalue === 'false') {
								cols[0][i].hide = false;
							} else if (hidevalue === 'true') {
								cols[0][i].hide = true;
							}
						}
					}
				}
				//解决跨域
				$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
					options.xhrFields = {
						withCredentials: true
					}
				})
				//第一个实例
				table.render({
					elem: '#demo',
					toolbar: '#toolbarDemo' //开启头部栏工具
						,
					url: globalData.server + './users/getUser' //数据接口
						,
					page: true //开启分页
						,
					method: 'POST',
					id: 'idTest',
					cols: cols
				});
				// 选择需要观察变动的节点
				const targetNode = document.getElementsByClassName('layui-table-tool'); //document.getElementById('some-
				const targetNode1 = document.getElementsByClassName('layui-table-tool-self')[
					0]; //document.getElementById('some-id');
				//  console.log(targetNode);
				//  console.log(targetNode1);
				// 观察器的配置（需要观察什么变动）
				const config = {
					attributes: true,
					childList: true,
					subtree: true
				};

				/* 重置文本框 */
				$('#chongzhi').on('click', function() {
					$(":input").val('');
					table.reload('idTest', {
						where: { //请求参数
							'name': name,
						}
					});
				});

				// 当观察到变动时执行的回调函数
				const callback = function(mutationsList, observer) {
					console.log(mutationsList);
					//  console.log(observer);
					// Use traditional 'for loops' for IE 11
					for (let mutation of mutationsList) {
						if (mutation.type === 'childList') {
							// console.log('A child node has been added or removed');
						} else if (mutation.type === 'attributes') {
							console.log(mutation.target.innerText);
							//先根据innertext 列名称 对cols 进行field 查询,查到field 可以找到本地缓存的字段,约定,本地缓存的命名规则为表名字母缩写_加field名组成,防止冲突
							var field = "";
							for (var i = 0; i < cols[0].length; i++) {
								if (cols[0][i].title === mutation.target.innerText) //标题相同 则取field
								{
									field = cols[0][i].field;
									break;
								}
							}
							if (field !== "") {
								// 组装缓存key
								let localkey = 'test' + field;
								//判断value值
								if (mutation.target.classList[2] !=
									undefined) //说明2: "layui-form-checked"  复选框是已选择的,说明此列是在表中显示的
								{
									window.localStorage.setItem(localkey, false);
								} else //没被选择,说明此列不在table中显示
								{
									window.localStorage.setItem(localkey, true);
								}
							}
						}
					}
				};

				// 创建一个观察器实例并传入回调函数
				const observer = new MutationObserver(callback);

				// 以上述配置开始观察目标节点
				observer.observe(targetNode1, config);
				//批量删除
				$('#delAll').click(function() {
					var checkStatus = table.checkStatus('idTest');
					var ids = [];
					$(checkStatus.data).each(function(i, o) { //o即为表格中一行的数据
						ids.push(o.id);
					});
					if (ids.length < 1) {
						layer.msg('无选中项');
						return false;
					}
					layer.confirm('真的删除你选择的行么', function(index) {
						var url = globalData.server + './users/delAll'; //请求地址
						$.post(url, {
							ids: JSON.stringify(ids),
							loginName: globalData.getUserName(),
						}, function(data) {
							if (data.count > 0) {
								console.log('删除成功');
								window.location.reload(); //刷新页面
							} else {
								layer.msg(data.msg, {
									icon: 6
								});
							}
						}, "json");
					});
				});
				//				//此处dataIndex为表格的下标，可以使用事件进行获取
				////例如使用下拉列表：
				//  layform.on('select(demo)', function (res) {
				//      let value = res.value;
				//      let elem = res.othis.parents('tr');
				//      let dataIndex = elem.attr("data-index");
				//		$(".layui-table").find('tr[data-index="'+dataIndex+'"]').find('td[data-field= name]').data('edit', false);
				//      
				//  })




				form.on('switch(zhuangtaiDemo)', function(obj) {
					var id = this.value;
					var name = this.name;
					var result = obj.elem.checked;
					console.log(result);
					var isLockout = "";
					if (result) {
						isLockout = 1;
					} else {
						isLockout = 0;
					}
					$.post(globalData.server + './users/updateIsLockout', {
							"id": id,
							'isLockout': isLockout,
						},
						function(data) {
							if (data.count > 0) {
								layer.msg('修改成功', {
									icon: 1,
									time: 2000 //2秒关闭（如果不配置，默认是3秒）
								}, function() {
									//do something
								});
							}
						}, "json");
				});
				$('#serach').on('click', function() {
					var loginName = $("#loginName").val(); //上面搜索框的id
					var isLockout = $("#isLockoutsss").val(); //上面搜索框的id
					table.reload('idTest', {
						where: { //请求参数
							'loginName': loginName,
							'isLockout': isLockout,
						}
					});
				});

				//监听头部工具栏
				table.on('toolbar(test)', function(obj) {
					switch (obj.event) {
						case 'add':
							layer.open({ //打开一个页面
								type: 2, //在当前页面打开一个页面
								area: ['500px', '350px'], //页面宽高
								content: 'user-add.html', //页面地址
								title: '添加用户', //打开页面标题
								end: function() {
									window.location.reload(); //当窗口关闭后刷新页面
								}
							});
							break;
					};
				});
				//监听工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					if (obj.event === 'del') { //删除
						layer.confirm('真的删除行么', function(index) {
							var url = globalData.server + './users/del'; //请求地址
							$.post(url, {
								id: obj.data.id,
								loginName: globalData.getUserName(),
							}, function(data) {
								if (data.count > 0) {
									console.log('删除成功');
									window.location.reload(); //刷新页面
								} else {
									layer.msg(data.msg, {
										icon: 6
									});
								}
							}, "json");
						});
					} else if (obj.event === 'roles') { //角色
						layer.open({ //打开一个页面
							type: 2, //在当前页面之上以弹框的形式，展示编辑页面
							area: ['500px', '550px'], //页面宽高
							content: 'roles-user-remove.html', //页面所在位置
							title: '您正在编辑用户编号为' + obj.data.id + '的角色信息',
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index);
								body.contents().find("#userid").val(obj.data.id);
							},
							end: function() {
								window.location.reload(); //当窗口关闭后刷新页面
							}
						});
					} else if (obj.event === 'section') { //角色
						layer.open({ //打开一个页面
							type: 2, //在当前页面之上以弹框的形式，展示编辑页面
							area: ['500px', '550px'], //页面宽高
							content: 'section-user-remove.html', //页面所在位置
							title: '您正在编辑用户编号为' + obj.data.id + '的部门信息',
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index);
								body.contents().find("#userid").val(obj.data.id);
							},
							end: function() {
								window.location.reload(); //当窗口关闭后刷新页面
							}
						});
					} else if (obj.event === 'editpwd') { //重置密码
						layer.confirm('确定要将密码重置成111111吗？', function(index) {
							var url = globalData.server + './users/updatePwd'; //请求地址
							$.post(url, {
								id: obj.data.id,
							}, function(data) {
								if (data.count > 0) {
									console.log('修改成功');
									window.location.reload(); //刷新页面
								}
							}, "json");
						});
					} else if (obj.event === 'edit') { //编辑
						layer.open({ //打开一个页面
							type: 2, //在当前页面之上以弹框的形式，展示编辑页面
							area: ['500px', '350px'], //页面宽高
							content: 'user-edit.html', //页面所在位置
							title: '您正在编辑用户编号为' + obj.data.id + '的信息',
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index);
								body.contents().find("#id").val(obj.data.id);
								body.contents().find("#loginName").val(obj.data.loginName);
								body.contents().find("#protectEmail").val(obj.data.protectEmail);
								body.contents().find("#protectMtel").val(obj.data.protectMtel);
								body.contents().find("#sid").val(obj.data.sid);
								form.render("select");
								console.log("obj.data.sid:"+obj.data.sid)
							},
							end: function() {
								 window.location.reload();  //当窗口关闭后刷新页面
							}
						});
					}
				});

			});
		</script>
	</body>

</html>
